<script>
import {ifPassApply, searchData} from "./rentalApplyJs";
import {dictionaryRequest} from "../../../util/js/globalRequestJs";
import CheckDetail from "./dialog/RentalCheckDetail.vue";
import {blurElement, gradeElement} from "../../../util/js/utils";

export default {
  components:{
    "check-detail-dialog" : CheckDetail
  },
  name: "RentalApply",
  data() {
    return {
      tableData: [],
      dialogVisible:false,

      search: {
        searchHouseName: '',
        searchUserName: '',
        searchUserType: '',
        searchApplyTime: [],
        searchHandleResult: '2',
        searchHandleTime: [],
        currentPage: 1,
        pageSize: 5,
        totalNumber: 0,
      },
      types: [],
      results: [],
      idData:''
    }
  },
  mounted() {
    this.getDictionaryMeaning();
    this.searchData()
  },
  methods: {
    handleCurrentChange(newPage) {
      this.search.currentPage = newPage;
      this.searchData();
    },
    handleSizeChange(newSize) {
      this.search.pageSize = newSize;
      this.searchData();
    },
    // 获取下拉列表
    getDictionaryMeaning() {
      dictionaryRequest('user', 'type').then(res => {
        this.types = res.data;
      }).catch(error => {
        console.log(error);
      });
      dictionaryRequest('house_record', 'handle_result').then(res => {
        this.results = res.data;
      }).catch(error => {
        console.log(error);
      })
    },

    // 条件搜索
    searchData() {
      const _this = this;
      const data = _this.search;
      searchData(data).then(res => {
        if (res.code === '200') {
          _this.tableData = res.data.data;
          _this.search.totalNumber = res.data.totalNumber;
        } else {
          _this.$message.error(res.msg);
        }
      }).catch(error => {
        _this.$message.error("系统出错了");
        console.log(error);
      })
    },
    // 清空搜索项
    clearSearch() {
      this.search.searchHouseName = '';
      this.search.searchUserName = '';
      this.search.searchUserType = '';
      this.search.searchApplyTime = [];
      this.search.searchHandleResult = '2';
      this.search.searchHandleTime = [];
      this.search.currentPage = 1;
      this.search.pageSize = 5;
      this.search.totalNumber = 0;
      this.searchData();
    },
    // 通过申请
    raPassApply(row) {
      // 传入参数1表示通过
      ifPassApply(row.hrUuid,'1').then(res => {
        if(res.code === '200') {
          this.searchData();
        }else{
          this.$message.error("操作失败")
        }
      }).catch(err => {
        this.$message.error("操作失败")
        console.log(err);
      })
    },
    // 不通过申请
    raNoPassApply(row) {
      // 传入参数1表示通过
      ifPassApply(row.hrUuid,'0').then(res => {
        if(res.code === '200') {
          this.searchData();
        }else{
          this.$message.error("操作失败")
        }
      }).catch(err => {
        this.$message.error("操作失败")
        console.log(err);
      })
    },
    // 取消处理结果，变为未处理
    cancelHandle(row){
      // 传入参数2改为未处理
      ifPassApply(row.hrUuid,'2').then(res => {
        if(res.code === '200') {
          this.searchData();
        }else{
          this.$message.error("操作失败")
        }
      }).catch(err => {
        this.$message.error("操作失败")
        console.log(err);
      })
    },
    // 查看详情
    checkApplyDetail(row){
      // 打开弹窗
      this.idData = row.hrUuid;
      this.dialogVisible = true;
      blurElement('ra-second-container',1.5)
      gradeElement('ra-dialog-container',3);
    },
    // 关闭弹窗
    closeDialog(){
      this.dialogVisible = false
      blurElement('ra-second-container',0)
      gradeElement('ra-dialog-container',1);
    }
  }
}
</script>

<template>
  <div id="ra-main-container" class="ra-main-container">
    <div id="ra-second-container" class="ra-second-container">
      <div id="ra-search-container" class="ra-search-container">
        <el-descriptions class="margin-top" :column="4" :size="'mini'" border>
          <el-descriptions-item>
            <template slot="label">
              房屋名称
            </template>
            <el-input v-model="search.searchHouseName" style="width:100px" size="mini"></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              申请人
            </template>
            <el-input v-model="search.searchUserName" style="width:100px" size="mini"></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              申请人类别
            </template>
            <el-select v-model="search.searchUserType" placeholder="请选择" size="mini">
              <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              处理结果
            </template>
            <el-select v-model="search.searchHandleResult" placeholder="请选择" style="width: 100px" size="mini">
              <el-option v-for="item in results" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label">
              申请时间
            </template>
            <el-date-picker
              :clearable="false"
              v-model="search.searchApplyTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="mini"
              style="width:292px">
            </el-date-picker>
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label">
              处理时间
            </template>
            <el-date-picker
              :clearable="false"
              v-model="search.searchHandleTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="mini"
              style="width:292px">
            </el-date-picker>
          </el-descriptions-item>
        </el-descriptions>
        <div id="ra-button-container">
          <el-button type="primary" size="small" @click="searchData">搜索</el-button>
          <el-button type="primary" size="small" @click="clearSearch">清空</el-button>
        </div>

      </div>
      <div id="ra-table-container">
        <el-table
          :data="tableData"
          border
          style="width: 100%;height: 100%">
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            v-if=false
            prop="hruuid">
          </el-table-column>
          <el-table-column
            v-if=false
            prop="huuid">
          </el-table-column>
          <el-table-column
            v-if=false
            prop="uuuid">
          </el-table-column>
          <el-table-column
            prop="houseName"
            label="房屋名称"
            width="100">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="申请人"
            width="100">
          </el-table-column>
          <el-table-column
            prop="userType"
            label="申请人类别"
            width="150">
          </el-table-column>
          <el-table-column
            prop="applyReason"
            label="申请理由"
            width="150">
          </el-table-column>
          <el-table-column
            prop="applyTime"
            label="申请时间"
            width="120">
          </el-table-column>
          <el-table-column
            prop="handleResult"
            label="处理结果"
            width="120">
            <template slot-scope="scope">
            <span
              :style="{ color: scope.row.handleResult === '未处理' ?
               'orange' : (scope.row.handleResult === '通过' ? 'green' : 'red') }">
              {{ scope.row.handleResult }}
            </span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="tableData.every(row => row.handleResult !== '未处理')"
            prop="handleTime"
            label="处理时间"
            width="120">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作">
            <template slot-scope="scope">
              <el-button @click="checkApplyDetail(scope.row)" type="text" size="small">查看详情</el-button>
              <el-button v-if="scope.row.handleResult !== '通过'" @click="raPassApply(scope.row)" type="text" size="small">通过
              </el-button>
              <el-button v-if="scope.row.handleResult !== '不通过'" @click="raNoPassApply(scope.row)" type="text" size="small">
                不通过
              </el-button>
              <el-button v-if="scope.row.handleResult !== '未处理'" @click="cancelHandle(scope.row)" type="text" size="small">
                取消处理
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div id="page" class="page">
        <el-pagination
          :current-page="search.currentPage"
          :page-sizes="[5,10, 15, 20, 50]"
          :page-size="search.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="search.totalNumber"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange">
        </el-pagination>
      </div>
    </div>
    <div id="ra-dialog-container" class="ra-dialog-container">
      <div v-if="dialogVisible" id="dialog">
          <check-detail-dialog :hrUuid="idData" @closeDialog="closeDialog"></check-detail-dialog>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import "rentalApplyCss.css";
</style>
